<template>
	<view>
		<!-- 视图层 - 地图 -->
		<template>
			<view id="viewDiv" :style="[{height: screenHeight + 'px'}]"></view>
		</template>

		<!-- 逻辑层 -->
		<view :msg="valueChangeSign" :change:msg="myMapViews.renderjsFn">
			<!-- 长势 -->
			<view
				style="position: fixed;top: 150rpx;right: 30rpx;background: rgba(0, 0, 0, 0.4); border-radius: 6px;padding: 10px;">

				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="handleChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.id" />
				</u-checkbox-group>
			</view>

			<!-- 其他 -->
		</view>
	</view>
</template>

<!-- 逻辑层代码 -->
<script>
	import mapConfig from "./map.json"
	export default {
		data() {
			return {
				screenHeight: 600,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '2023-07-06',
						id: 'TzqAlfalfaGrowth20230706Service'
					},
					{
						name: '2023-07-14',
						id: 'TzqAlfalfaGrowth20230714Service'
					}
				],
				/**
				 * param {}	type	方法类型
				 * param {}	param	方法需要参数
				 * */
				signfn: {},
				isLoad: false, // 是否加载完成
			}
		},

		computed: {
			// 调用视图层方法的信号
			valueChangeSign() {
				return {
					_time: new Date().getTime(),
					...this.signfn,
				}
			}
		},
		created() {
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.checkboxValue1 = this.checkboxList1.map(it => it.id)

			this.signfn = {
				type: 'createMap',
				param: mapConfig
			}
		},
		methods: {
			// 地图加载完成
			viewFn() {
				this.isLoad = true

				setTimeout(() => {
					this.signfn = {
						type: 'draw',
						param: {}
					}
				}, 10 * 1000)
			},
			// 长势切换
			handleChange(val) {
				if (!this.isLoad) return
				this.signfn = {
					type: 'growthSwitch',
					param: {
						value: val,
						ids: this.checkboxList1.map(it => it.id)
					}
				}
			},
		}
	}
</script>


<!-- RenderJS视图层代码 -->
<script module="myMapViews" lang="renderjs">
	import GMap from "@/arcgis/index.js"
	// import mapConfig from "./map.json"

	export default {
		name: 'myMapView',
		data() {
			return {
				myMapObject: {}, // 对象，存储关于地图的图层、方法、属性等
				gMap: {},
				viewer: {},
				mapConfig: {}
			}
		},
		methods: {
			async init() {
				try {
					this.mapConfig.baseUrl = 'http://222.74.215.218:56082' + this.mapConfig.baseUrl
					this.gMap = new GMap.Viewer(this.mapConfig, 'viewDiv');
					this.viewer = await this.gMap.initViewer();

					this.$ownerInstance.callMethod('viewFn')
				} catch (err) {
					console.log('err: ', err);
				}
			},
			// 逻辑层调用视图层(地图), 次为唯一入口
			renderjsFn(data) {
				if (data.type == 'createMap') {
					this.mapConfig = JSON.parse(JSON.stringify(data.param))
					this.init()
				} else if (data.type == 'growthSwitch') {
					// 长势图层切换 
					this.checkboxChange(data.param)
				} else if (data.type == 'draw') {
					// 绘制 
					this.drawPolygon(data.param)
				}

			},
			// 长势图层切换
			checkboxChange({
				ids,
				value,
			}) {
				try {
					this.viewer.map.layers.map(item => {
						// 判断是否为长势
						if ((ids || []).includes(item.id)) {
							if (value.includes(item.id)) {
								item.visible = true
							} else {
								item.visible = false
							}
						}
					})
				} catch (e) {
					console.log(e);
				}
			},
			// 绘制
			async drawPolygon() {
				console.log(this.gMap.Arcgis, 'this.gMap.Arcgis');
				// await GMap.Draw draw
				let a = await GMap.Draw.draw({
					view: this.viewer,
					type: 'polyline',
					Arcgis: this.gMap.Arcgis
				})
				console.log(a, 'a');
			}
		},
	}
</script>

<style>
	@import "@/arcgis/style/main.css";

	html,
	body,
	#viewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
	}
</style>